<template>
  <div>
    <div class="theme">
      <img :src="img" class="themeimg">
    </div>
    <div class="activity">
      <p class="distance">
        {{describe}}
      </p>
    </div>
    <div>
      <waterfall v-if="flowGoodsList" :col="2" :data="flowGoodsList"
        :width="itemWidth" :gutterWidth="gutterWidth" :loadDistance="10">
        <template>
          <div class="goodslist" v-for="(item,index) in flowGoodsList" :key="index">
            <router-link :to="{name:'goods',params:{id:item.id}}">
              <img :src="item.img">
              <p class="goodslist-title">{{item.title}}</p>
              <div class="goodslist-tags-out">
                <van-tag v-for="(item2,index) in item.tags" :key="index" class="goodslist-tags">{{item2}}</van-tag>
              </div>
              <p class="goodslist-price">￥{{item.price}}</p>
              <p class="goodslist-subtitle">{{item.description}}</p>
            </router-link>
          </div>
        </template>
      </waterfall>
    </div>
  </div>
</template>

<script>
export default {
  props: {
  },
  components: {
  },
  data() {
    return {
      flowGoodsList:[],
      describe:'',
      img:'',
    };
  },
  computed: {
    itemWidth(){
      return 340*0.5*(document.documentElement.clientWidth/375)
    },
    gutterWidth(){
      return 36*0.5*(document.documentElement.clientWidth/375)
    }
  },
  watch: {
  },
  created() {
    if(this.$route.query.name){
      this.getThemeDetail()
    }
  },
  methods: {
    getThemeDetail(){
      this.$http.get(`/api/theme/detail/${this.$route.query.name}`).then(
        response=>{
          console.log('Theme',response.data)
          this.img=response.data.entranceImg
          this.describe=response.data.description
          this.flowGoodsList=response.data.spuList
          this.flowGoodsList.forEach((item)=>{
            if(item.tags){
              item.tags=item.tags.split('$')
            }
          })
        },error=>{
          console.log('Theme',error.msg)
        }
      )
    }
  },
};
</script>
<style scoped lang="less">
.theme{
  height: 180px;
}
.themeimg{
  max-height: 100%;
  width: 100%;
}
.activity{
  text-align: left;
  padding: 10px 0 20px 10px;
  font-size: 17px;
}
.distance{
  padding: 10px 0 0 0;
}
.goodslist img{
    border-radius: 8px 8px 0 0;
    width: 100%;
  }
.goodslist{
  background: white;
  text-align: left;
  float: left;
  width: 100%;
  margin: 8px 8px;
  padding-bottom: 10px;
  box-shadow: 0 0 6px rgb(173, 185,196);
  border-radius: 8px 8px 8px 8px;
  
  .goodslist-subtitle{
    word-wrap:break-word;
    padding: 5px 10px 0 11px;
    color: rgb(95, 126, 151);
    font-size: 12px;
  }
  .goodslist-title{
    font-size: 15px;
    color: black;
    padding: 5px 10px 0 11px;
  }
  .goodslist-tags{
    background: rgb(111, 212, 187);
    font-size: 5px;
    margin-left: 4px;
    color: rgb(219, 255, 230);
    .goodslist-tags-out{
      margin-left: 6px;
    }
  }
  .goodslist-price{
    padding-top: 5px;
    color: rgb(62, 62, 131);
    padding-left: 10px;
  }
}
</style>